<template>
	<view class="container">
		<view class="user">
			<view class="user-header" style="background-image: url('/static/images/user-bg.png');">
				<view v-if="isLogin" class="user-header-cont">
					<view class="user-header-avatar"><image :src="userInfo.avatarUrl" /></view>
					<view class="user-header-right">
						<view class="user-header-cont-name user-header-cont-name-link" style="padding: 0;">{{ userInfo.nickName }}</view>
						<view class="user-header-grade-group">
							<view v-if="userInfo.dealer_info" class="user-header-grade dis-flex flex-y-center">
								<view class="user-grade_icon"><image mode="aspectFill" src="/static/images/level_icon.png"></image></view>
								<view class="user-grade_name">
									<text>{{ userInfo.dealer_info.level_name }}</text>
								</view>
							</view>
							<view v-if="userInfo.grade_id > 0" class="user-header-grade dis-flex flex-y-center">
								<view class="user-grade_icon"><image mode="aspectFill" src="/static/images/grade_icon.png"></image></view>
								<view class="user-grade_name">
									<text>{{ userInfo.grade.name }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="user-header-setting"><navigator hover-class="none" url="/pages/user/setting/setting">设置</navigator></view>
				</view>
				<!-- 未登录 -->
				<view v-else class="user-header-cont" @tap="onLogin">
					<view class="user-header-avatar"><image src="/static/images/default-avatar.jpg"></image></view>
					<view class="user-header-cont-name">点击登录</view>
				</view>
				<!-- 订单导航栏 -->
				<view class="order-navbar">
					<form @submit="onTargetOrder" data-type="all" report-submit="true">
						<button formType="submit" class="btn-normal">
							<view class="order-navbar-header dis-flex">
								<text class="f-30">我的订单</text>
								<view class="dis-flex flex-y-center">
									<text class="f-24 col-6">全部订单</text>
									<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
								</view>
							</view>
						</button>
					</form>
					<view class="order-navbar-footer dis-flex m-top10">
						<view class="order-navbar-item flex-box">
							<form @submit="onTargetOrder" data-type="all" report-submit="true">
								<button formType="submit" class="btn-normal">
									<text class="order-navbar__icon iconfont icon-form"></text>
									<text class="order-navbar__name">全部订单</text>
								</button>
							</form>
						</view>
						<view class="order-navbar-item flex-box">
							<form @submit="onTargetOrder" data-type="payment" report-submit="true">
								<button formType="submit" class="btn-normal">
									<text class="order-navbar__icon iconfont icon-daifukuan"></text>
									<text class="order-navbar__name">待付款</text>
									<text class="order-badge" v-if="orderCount.payment > 0">{{ orderCount.payment }}</text>
								</button>
							</form>
						</view>
						<view class="order-navbar-item flex-box">
							<form @submit="onTargetOrder" data-type="received" report-submit="true">
								<button formType="submit" class="btn-normal">
									<text class="order-navbar__icon iconfont icon-daishouhuo"></text>
									<text class="order-navbar__name">待收货</text>
									<text class="order-badge" v-if="orderCount.received > 0">{{ orderCount.received }}</text>
								</button>
							</form>
						</view>
						<view class="order-navbar-item flex-box">
							<form @submit="onTargetOrder" data-type="refund" report-submit="true">
								<button formType="submit" class="btn-normal">
									<text class="order-navbar__icon iconfont icon-shouhou"></text>
									<text class="order-navbar__name">退款/售后</text>
									<text class="order-badge" v-if="orderCount.refund > 0">{{ orderCount.refund }}</text>
								</button>
							</form>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的钱包 -->
		<view class="my-asset dis-flex">
			<view class="asset-left flex-box dis-flex flex-x-center">
				<view class="asset-left_item">
					<form @submit="onTargetWallet" report-submit="true">
						<button formType="submit" class="btn-normal">
							<view class="item-value dis-flex flex-x-center">
								<text>{{ isLogin ? userInfo.balance : '0.00' }}</text>
							</view>
							<view class="item-name dis-flex flex-x-center"><text>账户余额</text></view>
						</button>
					</form>
				</view>
				<view class="asset-left_item">
					<form @submit="onTargetPoints" report-submit="true">
						<button formType="submit" class="btn-normal">
							<view class="item-value dis-flex flex-x-center">
								<text>{{ isLogin ? userInfo.points : 0 }}</text>
							</view>
							<view class="item-name dis-flex flex-x-center">
								<text>可用{{ setting.points_name }}</text>
							</view>
						</button>
					</form>
				</view>
			</view>
			<view class="asset-right">
				<view class="asset-right_item">
					<form @submit="onTargetWallet" report-submit="true">
						<button formType="submit" class="btn-normal">
							<view class="item-icon dis-flex flex-x-center"><text class="iconfont icon-qianbao"></text></view>
							<view class="item-name dis-flex flex-x-center"><text>我的钱包</text></view>
						</button>
					</form>
				</view>
			</view>
		</view>
		<!-- 菜单列表 -->
		<view class="menus-list">
			<form v-for="(item, index) in menus" :key="index" @submit="onTargetMenus" :data-url="item.url" report-submit="true">
				<button formType="submit" class="btn-normal">
					<view class="menus-item dis-flex b-f">
						<view class="menus-item__left flex-box dis-flex flex-y-center">
							<text class="iconfont  f-34" :class="'icon-' + item.icon"></text>
							<text class="menus-item__name f-30">{{ item.name }}</text>
						</view>
						<view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center"><text class="iconfont icon-xiangyoujiantou f-26 col-7"></text></view>
					</view>
				</button>
			</form>
		</view>
		<!-- 退出按钮 -->
		<view class="padding-box m-top20 profile-btn" v-if="isLogin">
			<form @submit="onExit" report-submit="true"><button formType="submit">退出登录</button></form>
		</view>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			userInfo: {},
			isLogin: false,
			setting: {
				points_name: ''
			},
			orderCount: {
				payment: 0,
				received: 0,
				refund: 0
			},
			menus: []
		};
	},
	onShow() {
		this.isLogin = Tools.checkIsLogin();
		this.getUserDetail();
	},
	methods: {
		/**
		 * 验证是否已登录
		 */
		onCheckLogin() {
			if (!this.isLogin) {
				Tools.showError('很抱歉，您还没有登录');
				return false;
			}
			return true;
		},
		getUserDetail() {
			this.$get(this.$api.getUserDetail, {}, res => {
				if (!res.data.userInfo && this.isLogin) {
					this.isLogin = false;
					uni.clearStorageSync();
					this.getUserDetail();
				}
				this.userInfo = res.data.userInfo;
				this.setting = res.data.setting;
				this.orderCount = res.data.orderCount;
				this.menus = res.data.menus;
				// console.log(res.data);
			});
		},
		/**
		 * 菜单列表导航跳转
		 */
		onTargetMenus(e) {
			if (!this.onCheckLogin()) {
				return false;
			}
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '/' + e.currentTarget.dataset.url
			});
		},
		/**
		 * 跳转我的钱包页面
		 */
		onTargetWallet(e) {
			if (!this.onCheckLogin()) {
				return false;
			}
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: './wallet/index'
			});
		},
		/**
		 * 订单导航跳转
		 */
		onTargetOrder(e) {
			console.log(e);
			if (!this.onCheckLogin()) {
				return false;
			}
			// 记录formid
			this.$saveFormId(e.detail.formId);
			let urls = {
				all: '/pages/order/index?type=all',
				payment: '/pages/order/index?type=payment',
				received: '/pages/order/index?type=received',
				refund: '/pages/order/refund/index'
			};
			// 转跳指定的页面
			Route.navigateTo({
				url: urls[e.currentTarget.dataset.type]
			});
		},
		/**
		 * 跳转到登录页
		 */
		onLogin() {
			Route.toLogin();
		},
		/**
		 * 跳转积分明细页
		 */
		onTargetPoints(e) {
			if (!this.onCheckLogin()) {
				return false;
			}
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '/pages/points/log/index'
			});
		},
		/**
		 * 退出
		 */
		onExit() {
			uni.showModal({
				content: '是否退出当前账号',
				success: o => {
					if (o.confirm) {
						uni.showLoading({
							title: '退出账号...'
						});
						this.$get(this.$api.logout, {}, null, null, () => {
							uni.hideLoading();
							uni.clearStorageSync();
							Route.reLaunch({
								url: '/pages/index/index'
							});
						});
					}
				}
			});
		}
	}
};
</script>

<style>
/* 用户信息 */

.user {
	position: relative;
	background: #fff;
	margin-bottom: 145rpx;
}

.user-header {
	display: flex;
	padding-top: 1px;
	width: 100%;
	height: 310rpx;
	align-content: center;
	background-color: #fd0;
	background-repeat: no-repeat;
	background-position: center right;
	background-size: auto 100%;
}

.user-header .user-header-cont {
	display: flex;
	margin: auto;
	margin-bottom: 135rpx;
	width: 79%;
	align-items: center;
}
.user-header-setting {
	position: absolute;
	top: 0;
	right: 30rpx;
	font-size: 26rpx;
}

.user-header .user-header-cont .user-header-avatar {
	display: block;
	margin-right: 30rpx;
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 5rpx solid #fff;
	overflow: hidden;
	background: #fff;
}

.user-header .user-header-cont .user-header-avatar image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}

.user-header .user-header-cont .user-header-cont-name {
	font-size: 32rpx;
	padding: 20rpx 0;
}

/* 会员等级 */
.user-header-grade-group {
	display: flex;
}
.user-header-grade {
	background: #fff199;
	margin-top: 12rpx;
	height: 38rpx;
	line-height: 38rpx;
	border-radius: 10rpx;
	padding: 0 14rpx;
	margin-right: 20rpx;
}

/* .user-header-grade .user-grade_icon {
  margin-top: -5rpx;
} */

.user-header-grade .user-grade_icon image {
	display: block;
	width: 32rpx;
	height: 30rpx;
}

.user-header-grade .user-grade_name {
	margin-left: 8rpx;
	font-size: 24rpx;
}

/* 订单导航栏 */

.order-navbar {
	position: absolute;
	left: 19rpx;
	bottom: -125rpx;
	margin: auto;
	padding: 15rpx 0;
	width: 95%;
	box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
	font-size: 30rpx;
	border-top: 1rpx solid #eee;
	border-radius: 5rpx;
	background: #fff;
}

.order-navbar-header {
	margin: auto;
	padding-bottom: 10rpx;
	width: 91%;
	height: 70rpx;
	border-bottom: 1px solid #eee;
	justify-content: space-between;
	align-items: center;
}

.order-navbar-footer {
	width: 100%;
	padding: 10rpx 0px;
}

.order-navbar-footer .order-navbar-item .order-navbar__icon {
	text-align: center;
	margin: 0 auto;
	display: block;
	padding: 10rpx 0;
	color: #000;
	font-size: 36rpx;
}

.order-navbar-footer .order-navbar-item .order-navbar__name {
	display: block;
	font-size: 24rpx;
	color: #666;
	text-align: center;
	margin-right: 10rpx;
}

.order-navbar-footer .order-navbar-item .order-badge {
	position: absolute;
	top: 0;
	right: 55rpx;
	font-size: 22rpx;
	background: #ff495e;
	text-align: center;
	line-height: 28rpx;
	color: #fff;
	border-radius: 100%;
	min-height: 30rpx;
	min-width: 30rpx;
	padding: 1rpx;
}

/* 菜单列表 */

.menus-list {
	margin-top: 20rpx;
}

.menus-list .menus-item {
	position: relative;
	padding: 28rpx 28rpx;
	border-bottom: 1rpx solid #eee;
}

.menus-list .menus-item .menus-item__name {
	color: #444;
	margin-left: 20rpx;
}

/* 我的钱包 */

.my-asset {
	background: #fff;
	/* height: 70rpx; */
	padding: 26rpx 0;
}

.my-asset .asset-right {
	width: 210rpx;
	border-left: 1rpx solid #eee;
}

.asset-right_item {
	text-align: center;
	color: #666;
}

.asset-right_item .item-icon text {
	font-size: 36rpx;
}

.asset-right_item .item-name {
	margin-top: 10rpx;
}

.asset-right_item .item-name text {
	font-size: 25rpx;
}

.asset-left_item {
	text-align: center;
	color: #666;
	padding: 0 60rpx;
}

.asset-left_item .item-value text {
	font-size: 32rpx;
	color: red;
}

.asset-left_item .item-name {
	margin-top: 6rpx;
}

.asset-left_item .item-name text {
	font-size: 25rpx;
}
</style>
